<template>
  <section v-if="row?.content !== ''" :style="{ '--showAlign': isSelf ? 'flex-end' : 'flex-start' }" @click.stop>
    <section class="messageItem" :class="isSelf ? 'self' : null"
      v-if="(row?.msgType !== 'ALERT' && row?.msgType !== 'REVOKE')">
      <template v-if="!isSelf">
        <div @click="update($event, row)" class="radio" :class="!isSelf ? 'checked_isSelf' : null" v-if="openChecked">
          <el-radio v-if="(checked(row?.msgId) > -1)" />
          <el-radio :label="row?.msgId" v-else />
        </div>
        <el-avatar @click="openUser($event, row)" :size="44" :src="row?.portrait" />
      </template>

      <div class="msg_info">
        <div class="msg_time">
          <span v-if="!isSelf">{{ row?.nickName }}</span>
          <span>{{ day(row?.timestamp) }} </span>
        </div>
        <slot />
      </div>
      <template v-if="isSelf">
        <el-avatar :size="44" :src="row?.portrait" />
        <div @click="update($event, row)" class="radio" v-if="openChecked">
          <el-radio v-if="(checked(row?.msgId) > -1)" />
          <el-radio :label="row?.msgId" v-else />
        </div>
      </template>
    </section>
    <slot v-else :isSelf="isSelf" />
  </section>
</template>
<script setup>
import { computed, defineProps, defineEmits } from 'vue';
import { useStore } from 'vuex';
import dayjs from 'dayjs';
import IsToday from 'dayjs/plugin/isToday'
import IsYesterday from 'dayjs/plugin/isYesterday'
dayjs.extend(IsToday)
dayjs.extend(IsYesterday)
const props = defineProps({
  row: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['openUser'])
const day = (t) => {
  if (dayjs(t).isToday()) return dayjs(t).format('HH:mm')
  if (dayjs(t).isYesterday()) return '昨天' + dayjs(t).format("HH:mm")
  return dayjs(t).format("MM/DD HH:mm")
}
const store = useStore()
const openChecked = computed(() => store.state.openChecked)
const isSelf = computed(() => store.state.userInfo?.userId === props.row?.userId)
const checked = (msgId) => {
  const state = store.state.selectMessages
  return state.findIndex(r => r.msgId === msgId)
}
const update = (e, v) => {
  const value = [...store.state.selectMessages]
  const index = checked(v.msgId)
  if (index > -1) {
    value.splice(index, 1)
  } else {
    value.push(v)
  }
  store.commit('saveSelectMessages', value)
  e.preventDefault()
}

const openUser = (e, data) => {
  emit('openUser', {
    data,
    p: DOMRect.fromRect({
      width: 0,
      height: 0,
      x: e.clientX,
      y: e.clientY,
    })
  })
  e.preventDefault()
}
</script>

<style scoped lang="less">
.messageItem {
  display: flex;
  margin-bottom: 16px;

  :deep(.el-radio__label) {
    display: none;
  }

  .radio {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    align-items: center;
    margin-top: 5px;
    margin-left: 10px;

    &.checked_isSelf {
      margin-left: 0;
      margin-right: 10px;
    }
  }

  &.self {
    justify-content: flex-end;

    .msg_info {
      margin-right: 12px;
    }

    .msg_time {
      justify-content: flex-end;
    }
  }

  .msg_info {
    display: flex;
    flex-direction: column;
    margin-left: 12px;

    .msg_time {
      display: flex;
      padding-top: 6px;
      margin-bottom: 5px;

      >span {
        font-size: 12px;

        font-weight: 500;
        color: #787878;
        margin-right: 5px;
      }
    }
  }
}
</style>
